<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="3" width="300" align="center" style="height: 300px;margin-top: 100px;">
        <tr style="max-height: 50px;">
            <td colspan="4">
                <input type="text" id="text" style="width: 300px;height: 60px;font-size: 30px;">
            </td>
        </tr>
        <tr>
            <td style="text-align: center;"><input id="7" style="height:48px; width:72px;font-size: 20px;" type="button" value="7" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="8" style="height:48px; width:72px;font-size: 20px;" type="button" value="8" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="9" style="height:48px; width:72px;font-size: 20px;" type="button" value="9" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="." style="height:48px; width:72px;font-size: 20px;" type="button" value="." onClick="jisuan(this.id)"></td>
        </tr>
        <tr>
            <td style="text-align: center;"><input id="4" style="height:48px; width:72px;font-size: 20px;" type="button" value="4" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="5" style="height:48px; width:72px;font-size: 20px;" type="button" value="5" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="6" style="height:48px; width:72px;font-size: 20px;" type="button" value="6" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="+" style="height:48px; width:72px;font-size: 20px;" type="button" value="+" onClick="jisuan(this.id)"></td>
        </tr>
        <tr>
            <td style="text-align: center;"><input id="1" style="height:48px; width:72px;font-size: 20px;" type="button" value="1" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="2" style="height:48px; width:72px;font-size: 20px;" type="button" value="2" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="3" style="height:48px; width:72px;font-size: 20px;" type="button" value="3" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="-" style="height:48px; width:72px;font-size: 20px;" type="button" value="-" onClick="jisuan(this.id)"></td>
        </tr>
        <tr>
            <td style="text-align: center;"><input id="0" style="height:48px; width:72px;font-size: 20px;" type="button" value="0" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="*" style="height:48px; width:72px;font-size: 20px;" type="button" value="*" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="/" style="height:48px; width:72px;font-size: 20px;" type="button" value="/" onClick="jisuan(this.id)"></td>
            <td style="text-align: center;"><input id="=" style="height:48px; width:72px;font-size: 20px;" type="button" value="=" onClick="jisuan(this.id)"></td>
        </tr>
    </table>
<script>
//    var a="";
//    function jisuan(num){
//        if(num=="="){
//            document.form.text.value=eval(a);
//        }else{
//            a=a+num;
//            document.form.text.value=a;
//        }
//    }
    function jisuan(o){
        text.value = o=='='? eval(text.value):text.value+o;
    }
</script>
</body>
</html>